<template>
  <!-- 接口名称 -->
  <div class="ApiList">
    <el-row :gutter="0" style="margin-left:30px;">
      <el-col :span="2" style="padding-left:10px;margin-top:3px">
        <span style="font-size:13px">接口名称 :</span>
      </el-col>
      <el-col :span="4" style="">
        <el-input v-model="apiInfo.api_name" size="mini" placeholder="请输入接口名称"></el-input>
      </el-col>
      <el-col :span="2" style="padding-left:10px;margin-top:3px">
        <span style="font-size:13px">接口分组 :</span>
      </el-col>
      <el-col :span="4">
        <el-select v-model="$store.state.GROUP_NAME" @change="clickSelectGroupName" size="mini" filterable placeholder="选择分组">
          <el-option
            v-for="item in $store.state.GROUP_LIST"
            :key="item.id"
            :value="item.group_name"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="12">
        <el-button size="mini" style="margin-left:30px">接口说明</el-button>
      </el-col>
    </el-row>
    <!-- 接口发送 -->
    <el-row style="margin:10px;">
      <!-- 选择请求方式 -->
      <el-select v-model="requestMethod" @change="clickSelectRequestMethod" size="mini" style="width:95px">
        <el-option v-for="item in dropdownRequestMethod" :key="item.method" :value="item.method"></el-option>
      </el-select>
      <!-- 选择请求协议 -->
      <el-select v-model="httpMethod" @change="clickSelectHttpMethod" size="mini" style="width:90px">
        <el-option v-for="item in dropdownHttpMethod" :key="item.method" :value="item.method"></el-option>
      </el-select>
      <!-- 接口路径 -->
      <el-input size="mini" v-model="apiInfo.api_address" placeholder="请输入接口路径" style="width:40%"></el-input>
      <!-- 发送 保存 -->
      <el-button size="mini" type="primary" style="margin-left:50px" @click="clickSendApiRequest">发送</el-button>
      <el-button size="mini" type="primary" style="margin-left:20px" @click="clickSaveApiRequest">保存</el-button>
    </el-row>
    <!-- 接口相关参数标签页 -->
    <el-tabs v-model="activeName" @tab-click="handleClickTabs" style="margin-left:10px;">
      <!-- HEADER参数标签页 -->
      <el-tab-pane label="Header" name="header">
        <span style="font-size:12px;margin:0 40px 0 5px;">Herder参数</span>
        <el-button size="mini" type="text">导入参数</el-button>
        <el-button size="mini" type="text">导入出参数</el-button>
        <!-- HEADER参数表格 -->
        <el-table
          ref="headerRef"
          :data="headerData"
          header-align="center"
          :default-sort="{prop: 'key', order: 'descending'}"
          tooltip-effect="dark"
          size="mini"
          style="width: 100%"
          :highlight-current-row='true'
          @selection-change="selectHeaderhandle"
        >
          <!-- HEADER选择框 -->
          <el-table-column type="selection" width="50"></el-table-column>
          <!-- HEADER索引 -->
          <el-table-column type="index" width="50"></el-table-column>
          <!-- HEADER标签 -->
          <el-table-column label="标签" prop="header_name" sortable width="150px">
            <template slot-scope="scope">
              <el-input v-model="scope.row.header_name" size="mini" placeholder="标签"></el-input>
            </template>
          </el-table-column>
          <!-- HEADER内容 -->
          <el-table-column label="内容" prop="header_value" width="150px">
            <template slot-scope="scope">
              <el-input v-model="scope.row.header_value" size="mini" placeholder="参数"></el-input>
            </template>
          </el-table-column>
          <!-- HEADER必填 -->
          <el-table-column label="必填" prop="header_required" sortable width="80px">
            <template slot-scope="scope">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  必填
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>必填</el-dropdown-item>
                  <el-dropdown-item>选填</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
          <!-- HEADER类型 -->
          <el-table-column label="类型" prop="header_type" sortable width="80px">
            <template slot-scope="scope">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  类型
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>String</el-dropdown-item>
                  <el-dropdown-item>Number</el-dropdown-item>
                  <el-dropdown-item>Float</el-dropdown-item>
                  <el-dropdown-item>Integet</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
          <!-- HEADER描述 -->
          <el-table-column label="描述" prop="header_desc" width="150px">
            <template slot-scope="scope">
              <el-input v-model="scope.row.header_desc" size="mini" placeholder="用于生成接口文档"></el-input>
            </template>
          </el-table-column>
          <!-- HEADER操作 -->
          <el-table-column label="操作" prop="operation" width="200px">
            <template slot-scope="scope">
              <!-- HEADER 新增、删除行 -->
              <el-button
                size="mini"
                style="padding:3px 0 3px 0;font-size:20px;"
                @click="deleteTableRow(scope.$index,scope.row,'header')"
              >
                <i class="el-icon-delete"></i>
              </el-button>
              <el-button
                type
                size="mini"
                style="padding:3px 0 3px 0;font-size:20px;"
                @click="createTableRow(scope.$index,scope.row,'header')"
              >
                <i class="el-icon-circle-plus-outline"></i>
              </el-button>
              <!-- <el-button
                type
                size="mini"
                style="padding:3px 0 3px 0;font-size:20px;"
                @click="saveTableRow(scope.$index,scope.row,'header')"
              >
                <i class="fa fa-floppy-o" aria-hidden="true"></i>
              </el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <!-- HEADER参数表格结束 -->
      </el-tab-pane>
      <!-- QUERY参数标签页 -->
      <el-tab-pane label="Query" name="query">
        <span style="font-size:12px;margin:0 40px 0 5px;">QUERY参数</span>
        <el-button size="mini" type="text">导入参数</el-button>
        <el-button size="mini" type="text">导入出参数</el-button>
        <!-- QUERY参数表格 -->
        <el-table
          ref="queryRef"
          :data="queryData"
          header-align="center"
          :default-sort="{prop: 'key', order: 'descending'}"
          tooltip-effect="dark"
          size="mini"
          style="width: 100%"
          :highlight-current-row='true'
          @selection-change='selectQueryhandle'
        >
          <!-- QUERY 选择框 -->
          <el-table-column type="selection" width="50"></el-table-column>
          <!-- QUERY 索引 -->
          <el-table-column type="index" width="50"></el-table-column>
          <!-- QUERY 标签 -->
          <el-table-column label="标签" prop="query_name" sortable width="150px">
            <template slot-scope="scope">
              <el-input v-model="scope.row.query_name" size="mini" placeholder="标签"></el-input>
            </template>
          </el-table-column>
          <!-- QUERY 内容 -->
          <el-table-column label="内容" prop="query_value" width="150px">
            <template slot-scope="scope">
              <el-input v-model="scope.row.query_value" size="mini" placeholder="参数"></el-input>
            </template>
          </el-table-column>
          <!-- QUERY 必填 -->
          <el-table-column label="必填" prop="query_required" sortable width="80px">
            <template slot-scope="scope">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  必填
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>必填</el-dropdown-item>
                  <el-dropdown-item>选填</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
          <!-- QUERY 类型 -->
          <el-table-column label="类型" prop="query_type" sortable width="80px">
            <template slot-scope="scope">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  类型
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>String</el-dropdown-item>
                  <el-dropdown-item>Number</el-dropdown-item>
                  <el-dropdown-item>Float</el-dropdown-item>
                  <el-dropdown-item>Integet</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
          <!-- QUERY 描述 -->
          <el-table-column label="描述" prop="query_desc" width="150px">
            <template slot-scope="scope">
              <el-input v-model="scope.row.query_desc" size="mini" placeholder="用于生成接口文档"></el-input>
            </template>
          </el-table-column>
          <!-- QUERY 操作 -->
          <el-table-column label="操作" prop="operation" width="200px">
            <template slot-scope="scope">
              <!-- QUERY 新增、删除行 -->
              <el-button
                type
                size="mini"
                style="padding:3px 0 3px 0;font-size:20px;"
                @click="deleteTableRow(scope.$index,scope.row,'query')"
              >
                <i class="el-icon-delete"></i>
              </el-button>
              <el-button
                type
                size="mini"
                style="padding:3px 0 3px 0;font-size:20px;"
                @click="createTableRow(scope.$index,scope.row,'query')"
              >
                <i class="el-icon-circle-plus-outline"></i>
              </el-button>
              <!-- <el-button
                type
                size="mini"
                style="padding:3px 0 3px 0;font-size:20px;"
                @click="saveTableRow(scope.$index,scope.row,'query')"
              >
                <i class="fa fa-floppy-o" aria-hidden="true"></i>
              </el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <!--QUERY 参数表格结束 -->
      </el-tab-pane>
      <el-tab-pane label="Body" name="body">
        <vue-json-editor
          v-model="bodyData"
          mode="code"
          :showBtns="false"
          lang="zh"
          @json-change="onJsonChange"
          @has-error="onJsonError"
          style="height:200px;"
        ></vue-json-editor>
      </el-tab-pane>
      <el-tab-pane label="认证" name="auth">认证</el-tab-pane>
      <el-tab-pane label="预执行脚本" name="setup">预执行脚本</el-tab-pane>
      <el-tab-pane label="后执行脚本" name="teardown">后执行脚本</el-tab-pane>
      <el-tab-pane label="响应" name="response">
        <span>Json格式展示：</span>
        <vue-json-editor
          v-model="responseData"
          mode="code"
          :showBtns="false"
          lang="zh"
          style="height:200px;"
        ></vue-json-editor>
        <span>HTML页面展示：</span>
        <iframe :srcdoc="responseData.response" style="width:100%;height:400px"></iframe>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>


<script>
import apijs from "../components/js/ApiList";
export default apijs;
</script>

<style>
.ApiList {
  position: relative;
}
.jsonedit-vue {
  height: 300px;
}
.jsoneditor-poweredBy,
.jsoneditor-modes {
  display: none;
}
div.jsoneditor-menu {
  background-color: #c6d4e2;
}

</style>